<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8" />
  <title>会员列表-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <base href="http://localhost:8080/"/>
  <link rel="stylesheet" href="css/font.css" />
  <link rel="stylesheet" href="css/weadmin.css" />
</head>

<body>
  <div class="weadmin-nav">
    <span class="layui-breadcrumb">
      <a href="javascript:;">首页</a> <a href="javascript:;">会员管理</a>
      <a href="javascript:;"> <cite>会员列表</cite></a>
    </span>
    <a class="layui-btn layui-btn-sm" style="margin-top:3px;float:right"
      href="javascript:location.replace(location.href);" title="刷新">
      <i class="layui-icon layui-icon-refresh"></i>
    </a>
  </div>

  <div class="weadmin-body">
    <div class="layui-row">
        <div class="demoTable">
          会员搜索：
          <div class="layui-inline">
            <input class="layui-input" name="keyword" placeholder="搜索用户名,昵称或邮箱" id="demoReload" autocomplete="off">
          </div>
          <button class="layui-btn" data-type="reload">搜索</button>
        </div>
    </div>
    <div class="weadmin-block demoTable">
      <button class="layui-btn layui-btn-danger" data-type="batchDelete">
        <i class="layui-icon layui-icon-delete"></i>批量删除
      </button>
      <button class="layui-btn" onclick="WeAdminShow('添加用户','member/manage/save/page',800,520)">
        <i class="layui-icon layui-icon-add-circle-fine"></i>添加
      </button>
    </div>
    <!-- 表单数据 -->
    <table class="layui-hide" id="member-table" lay-filter="member-table"></table>
    <!-- 操作栏 -->
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

  </div>
  <script src="lib/layui/layui.js" type="text/javascript"></script>
  <script src="js/eleDel.js" type="text/javascript"></script>
  <script type="text/javascript">
    layui.use(['table', 'jquery'], function(){
      var table = layui.table,
              $ = layui.jquery;

      table.render({
        elem: '#member-table'         // 显示表单数据的div的id
        ,url:'member/manage/list' // 请求url
        ,title: '用户数据表'
        ,cols: [[
          {type: 'checkbox', fixed: 'left'}
          ,{field:'id', title:'ID', width:60, fixed: 'left', sort: true}
          ,{field:'username', title:'用户名', width:140}
          ,{field:'name', title:'用户昵称', width:140}
          ,{field:'sex', title:'性别', width:75, sort: true}
          ,{field:'email', title:'邮箱', width:180}
          ,{field:'title', title:'职位', width:120, sort: true}
          ,{field:'department', title:'部门', width:140, sort: true}
          ,{field:'leaderName', title:'直接领导', width:140, sort: true}
          ,{field:'gmtCreate', title:'加入时间', width:180}
          ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:130}
        ]]
        ,id: 'memberList'
        ,page: true
      });

      //监听行工具事件
      table.on('tool(member-table)', function(obj){
        var data = obj.data;
        if(obj.event === 'del'){
          layer.confirm('真的删除行么', function(index){
            // 发送删除请求
            $.ajax({
              url: 'http://localhost:8080/member/manage/delete',
              type: 'POST',
              dataType: 'json',
              data: {
                "id":data.id
              },
              success: function (res) {
                if (res.result === "SUCCESS") {
                  console.log('删除成功');
                  layer.msg("删除成功！", {
                    icon:1,
                    time:500,
                    end: function () {
                      location.reload();
                    }
                  });
                } else {
                  layer.msg(res.message);
                }
              }
            });
            layer.close(index);
          });
        } else if(obj.event === 'edit'){
          layer.open({
            type: 2,
            area: [800 + 'px', 520 + 'px'],
            fix: false, //不固定
            maxmin: true,
            shadeClose: true,
            shade: 0.4,
            title: '修改用户信息',
            content: 'http://localhost:8080/member/manage/edit/page' + '?id='+data.id,
            end: function () {
              location.reload();
            }
          });
        }
      });



      // 搜索事件
      var active = {
        reload: function(){
          var demoReload = $('#demoReload');

          //执行重载
          table.reload('memberList', {
            page: {
              curr: 1 //重新从第 1 页开始
            }
            ,where: {
              keyword: demoReload.val()
            }
          });
        },

        batchDelete: function(){ //获取选中数据
          var checkStatus = table.checkStatus('memberList')
                  ,data = checkStatus.data;
          var deleteId = [];
          for (let i = 0; i < data.length; i++) {
            deleteId.push(data[i].id);
          }
          // 执行批量删除
          layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
              url: 'http://localhost:8080/member/manage/batch/delete',
              type: 'POST',
              dataType: 'json',
              // contentType: 'application/json',
              data: "list=" + deleteId,
              success: function (res) {
                if (res.result === "SUCCESS") {
                  console.log('批量删除成功');
                  layer.msg('删除成功!', {
                    icon: 1,
                    time: 500,
                    end: function () {
                      // 获得frame索引
                      var index = parent.layer.getFrameIndex(window.name);
                      //关闭当前frame
                      parent.layer.close(index);
                      location.reload();
                    }
                  });
                } else {
                  layer.msg(res.message);
                }
              }
            });
          });
        }
      };
      $('.demoTable .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
      });



    });
  </script>
</body>

</html>